<template>
  <div class="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 :dur="6" class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title">报警系统</div>
    <div class="menu">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="unset" text-color="#FFFFFF" active-text-color="#FFFFFF">
        <el-submenu index="1">
          <template slot="title">客户</template>
          <el-menu-item index="1-1">新增客户</el-menu-item>
          <el-menu-item index="1-2">客户列表</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">设备</template>
          <el-menu-item index="2-1">设备注册</el-menu-item>
          <el-menu-item index="2-2">清除断线未注册设备</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" >报警事件</el-menu-item>
        <el-submenu index="4">
          <template slot="title">布防撤防</template>
          <el-menu-item index="96">布防</el-menu-item>
          <el-menu-item index="97">撤防</el-menu-item>
          <el-menu-item index="98">立即布防</el-menu-item>
          <el-menu-item index="99">在家布防留守布防</el-menu-item>
          <el-menu-item index="100">即时留守布防</el-menu-item>
          <el-menu-item index="101">清除报警</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

  </div>
</template>

<script>

export default {
  name: 'TopHeader',
  data(){
    return {
      activeIndex: '1',
    }
  },
  props: {
    deviceUserId:{
      type: Number,
      default: null
    }
  },
  methods: {
    setEquipDialogShow() {
      this.$emit('setDialogShow', {
        name: 'equipmentRegister',
        show: true
      })
    },
    handleSelect(key, index) {
     if (key === '1-1') {
       this.$emit('setDialogShow', {
         name: 'addCustomer',
         show: true
       })
     }
      if (key === '1-2') {
        this.$emit('setDialogShow', {
          name: 'customerList',
          show: true
        })
      }
      if (key === '2-1') {
        this.$emit('setDialogShow', {
          name: 'equipmentRegister',
          show: true
        })
      }
      if (key === '2-2') {
        this.request.post('/uozo-alarm/device/deleteNoBindDevice').then(() => {
          this.$message({
            message: '清除成功',
            type: 'success'
          })
        }).catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          });
        })
      }
      if (key === '3') {
        this.$emit('setDialogShow', {
          name: 'alarmList',
          show: true
        })
      }
      if (key == 96 ||key == 97||key == 98||key == 99||key == 100||key == 101) {
        this.updateDeviceArmingStatus(key)
      }
    },
    updateDeviceArmingStatus(handleCode) {
      this.request.post('/uozo-alarm/device/updateDeviceArmingStatus', {
        deviceUserId: this.deviceUserId,
        handleCode: handleCode
      }).then(() => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        setTimeout(() => {
          this.$parent.getDeviceList()
        }, 6000)
      }).catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-header {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    color: #00EA37;
    transform: translateX(-50%);
  }
  .menu {
    position: absolute;
    font-size: 16px;
    left: 13%;
    top: 35px;
    color: #00EA37;
    .el-menu.el-menu--horizontal{
      border-bottom: none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
      border-bottom: none;
    }

    .el-menu--horizontal>.el-submenu .el-submenu__title{
      border-bottom: none;
    }

  }
}
//.el-submenu__title:focus,
//.el-submenu__title:hover {
//  outline: 0;
//  background-color: rgba(2, 101, 154) !important;
//}
.el-menu-item {
  background-color: rgba(2, 101, 154) !important;
}
//.el-menu-item:focus,
//.el-menu-item:hover {
//  outline: 0;
//  background-color: #409eff !important;
//  color: #FFFFFF;
//}
//.el-menu {
//  background-color: transparent;
//}
 .el-menu-item:focus,
 .el-menu-item:hover,
 .el-menu-item:hover i,
 .el-menu .el-submenu .el-submenu__title:hover,
 .el-menu .el-submenu .el-submenu__title:hover i,
 .el-menu .el-submenu .el-submenu__title:focus{
  background: #409eff !important;
  color: #fff;
}

</style>
